<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"> <style>
	.KEYW {color: #933;}
	.COMM {color: #bbb; font-style: italic;}
	.NUMB {color: #393;}
	.STRN {color: #393;}
	.REGX {color: #339;}
	.line {border-right: 1px dotted #666; color: #666; font-style: normal;}
	</style></head><body><pre><span class='line'>  1</span> <span class="COMM">// ===================================================================</span><span class="WHIT">
<span class='line'>  2</span> </span><span class="COMM">// Author: Denis Howlett &lt;feedback@isocra.com></span><span class="WHIT">
<span class='line'>  3</span> </span><span class="COMM">// WWW: http://www.isocra.com/</span><span class="WHIT">
<span class='line'>  4</span> </span><span class="COMM">//</span><span class="WHIT">
<span class='line'>  5</span> </span><span class="COMM">// NOTICE: You may use this code for any purpose, commercial or</span><span class="WHIT">
<span class='line'>  6</span> </span><span class="COMM">// private, without any further permission from the author. You may</span><span class="WHIT">
<span class='line'>  7</span> </span><span class="COMM">// remove this notice from your final code if you wish, however we</span><span class="WHIT">
<span class='line'>  8</span> </span><span class="COMM">// would appreciate it if at least the web site address is kept.</span><span class="WHIT">
<span class='line'>  9</span> </span><span class="COMM">//</span><span class="WHIT">
<span class='line'> 10</span> </span><span class="COMM">// You may *NOT* re-distribute this code in any way except through its</span><span class="WHIT">
<span class='line'> 11</span> </span><span class="COMM">// use. That means, you can include it in your product, or your web</span><span class="WHIT">
<span class='line'> 12</span> </span><span class="COMM">// site, or any other form where the code is actually being used. You</span><span class="WHIT">
<span class='line'> 13</span> </span><span class="COMM">// may not put the plain javascript up on your site for download or</span><span class="WHIT">
<span class='line'> 14</span> </span><span class="COMM">// include it in your javascript libraries for download.</span><span class="WHIT">
<span class='line'> 15</span> </span><span class="COMM">// If you wish to share this code with others, please just point them</span><span class="WHIT">
<span class='line'> 16</span> </span><span class="COMM">// to the URL instead.</span><span class="WHIT">
<span class='line'> 17</span> </span><span class="COMM">//</span><span class="WHIT">
<span class='line'> 18</span> </span><span class="COMM">// Please DO NOT link directly to this .js files from your site. Copy</span><span class="WHIT">
<span class='line'> 19</span> </span><span class="COMM">// the files to your server and use them there. Thank you.</span><span class="WHIT">
<span class='line'> 20</span> </span><span class="COMM">// ===================================================================</span><span class="WHIT">
<span class='line'> 21</span> 
<span class='line'> 22</span> </span><span class="COMM">/** Keep hold of the current table being dragged */</span><span class="WHIT">
<span class='line'> 23</span> </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">currenttable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 24</span> 
<span class='line'> 25</span> </span><span class="COMM">/** Capture the onmousemove so that we can see if a row from the current
<span class='line'> 26</span>  *  table if any is being dragged.
<span class='line'> 27</span>  * @param ev the event (for Firefox and Safari, otherwise we use window.event for IE)
<span class='line'> 28</span>  */</span><span class="WHIT">
<span class='line'> 29</span> </span><span class="NAME">document.onmousemove</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 30</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">currenttable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">currenttable.dragObject</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 31</span> </span><span class="WHIT">        </span><span class="NAME">ev</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">ev</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 32</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mousePos</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">currenttable.mouseCoords</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 33</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">mousePos.y</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">currenttable.mouseOffset.y</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 34</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">currenttable.oldY</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 35</span> </span><span class="WHIT">            </span><span class="COMM">// work out if we're going up or down...</span><span class="WHIT">
<span class='line'> 36</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">movingDown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">currenttable.oldY</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 37</span> </span><span class="WHIT">            </span><span class="COMM">// update the old value</span><span class="WHIT">
<span class='line'> 38</span> </span><span class="WHIT">            </span><span class="NAME">currenttable.oldY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">y</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 39</span> </span><span class="WHIT">            </span><span class="COMM">// update the style to show we're dragging</span><span class="WHIT">
<span class='line'> 40</span> </span><span class="WHIT">            </span><span class="NAME">currenttable.dragObject.style.backgroundColor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"#eee"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 41</span> </span><span class="WHIT">            </span><span class="COMM">// If we're over a row then move the dragged row to there so that the user sees the</span><span class="WHIT">
<span class='line'> 42</span> </span><span class="WHIT">            </span><span class="COMM">// effect dynamically</span><span class="WHIT">
<span class='line'> 43</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">currentRow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">currenttable.findDropTargetRow</span><span class="PUNC">(</span><span class="NAME">y</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 44</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">currentRow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 45</span> </span><span class="WHIT">                </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">movingDown</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">currenttable.dragObject</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">currentRow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 46</span> </span><span class="WHIT">                    </span><span class="NAME">currenttable.dragObject.parentNode.insertBefore</span><span class="PUNC">(</span><span class="NAME">currenttable.dragObject</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">currentRow.nextSibling</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 47</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">!</span><span class="WHIT"> </span><span class="NAME">movingDown</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">currenttable.dragObject</span><span class="WHIT"> </span><span class="PUNC">!=</span><span class="WHIT"> </span><span class="NAME">currentRow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 48</span> </span><span class="WHIT">                    </span><span class="NAME">currenttable.dragObject.parentNode.insertBefore</span><span class="PUNC">(</span><span class="NAME">currenttable.dragObject</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">currentRow</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 49</span> </span><span class="WHIT">                </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 50</span> </span><span class="WHIT">            </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 51</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 52</span> 
<span class='line'> 53</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 54</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 55</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 56</span> 
<span class='line'> 57</span> </span><span class="COMM">// Similarly for the mouseup</span><span class="WHIT">
<span class='line'> 58</span> </span><span class="NAME">document.onmouseup</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 59</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">currenttable</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="NAME">currenttable.dragObject</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 60</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">droppedRow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">currenttable.dragObject</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 61</span> </span><span class="WHIT">        </span><span class="COMM">// If we have a dragObject, then we need to release it,</span><span class="WHIT">
<span class='line'> 62</span> </span><span class="WHIT">        </span><span class="COMM">// The row will already have been moved to the right place so we just reset stuff</span><span class="WHIT">
<span class='line'> 63</span> </span><span class="WHIT">        </span><span class="NAME">droppedRow.style.backgroundColor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">'transparent'</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 64</span> </span><span class="WHIT">        </span><span class="NAME">currenttable.dragObject</span><span class="WHIT">   </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 65</span> </span><span class="WHIT">        </span><span class="COMM">// And then call the onDrop method in case anyone wants to do any post processing</span><span class="WHIT">
<span class='line'> 66</span> </span><span class="WHIT">        </span><span class="NAME">currenttable.onDrop</span><span class="PUNC">(</span><span class="NAME">currenttable.table</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">droppedRow</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 67</span> </span><span class="WHIT">        </span><span class="NAME">currenttable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// let go of the table too</span><span class="WHIT">
<span class='line'> 68</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 69</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 70</span> 
<span class='line'> 71</span> 
<span class='line'> 72</span> </span><span class="COMM">/** get the source element from an event in a way that works for IE and Firefox and Safari
<span class='line'> 73</span>  * @param evt the source event for Firefox (but not IE--IE uses window.event) */</span><span class="WHIT">
<span class='line'> 74</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">getEventSource</span><span class="PUNC">(</span><span class="NAME">evt</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 75</span> </span><span class="WHIT">    </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">window.event</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 76</span> </span><span class="WHIT">        </span><span class="NAME">evt</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// For IE</span><span class="WHIT">
<span class='line'> 77</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">evt.srcElement</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 78</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT"> </span><span class="KEYW">else</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 79</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">evt.target</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// For Firefox</span><span class="WHIT">
<span class='line'> 80</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 81</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'> 82</span> 
<span class='line'> 83</span> </span><span class="COMM">/**
<span class='line'> 84</span>  * Encapsulate table Drag and Drop in a class. We'll have this as a Singleton
<span class='line'> 85</span>  * so we don't get scoping problems.
<span class='line'> 86</span>  * @constructor
<span class='line'> 87</span>  */</span><span class="WHIT">
<span class='line'> 88</span> </span><span class="KEYW">function</span><span class="WHIT"> </span><span class="NAME">TableDnD</span><span class="PUNC">(</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'> 89</span> </span><span class="WHIT">    </span><span class="COMM">/** Keep hold of the current drag object if any */</span><span class="WHIT">
<span class='line'> 90</span> </span><span class="WHIT">    </span><span class="NAME">this.dragObject</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 91</span> </span><span class="WHIT">    </span><span class="COMM">/** The current mouse offset */</span><span class="WHIT">
<span class='line'> 92</span> </span><span class="WHIT">    </span><span class="NAME">this.mouseOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 93</span> </span><span class="WHIT">    </span><span class="COMM">/** The current table */</span><span class="WHIT">
<span class='line'> 94</span> </span><span class="WHIT">    </span><span class="NAME">this.table</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 95</span> </span><span class="WHIT">    </span><span class="COMM">/** Remember the old value of Y so that we don't do too much processing */</span><span class="WHIT">
<span class='line'> 96</span> </span><span class="WHIT">    </span><span class="NAME">this.oldY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'> 97</span> 
<span class='line'> 98</span> </span><span class="WHIT">    </span><span class="COMM">/** Initialise the drag and drop by capturing mouse move events */</span><span class="WHIT">
<span class='line'> 99</span> </span><span class="WHIT">    </span><span class="NAME">this.init</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">table</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>100</span> </span><span class="WHIT">        </span><span class="NAME">this.table</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">table</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>101</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">table.tBodies</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">rows</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">//getElementsByTagName("tr")</span><span class="WHIT">
<span class='line'>102</span> </span><span class="WHIT">        </span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">=</span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">&lt;</span><span class="NAME">rows.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>103</span> </span><span class="WHIT">			</span><span class="COMM">// John Tarr: added to ignore rows that I've added the NoDnD attribute to (Category and Header rows)</span><span class="WHIT">
<span class='line'>104</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">nodrag</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">getAttribute</span><span class="PUNC">(</span><span class="STRN">"NoDrag"</span><span class="PUNC">)</span><span class="WHIT">
<span class='line'>105</span> </span><span class="WHIT">			</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">nodrag</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">nodrag</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT"> </span><span class="COMM">//There is no NoDnD attribute on rows I want to drag</span><span class="WHIT">
<span class='line'>106</span> </span><span class="WHIT">				</span><span class="NAME">this.makeDraggable</span><span class="PUNC">(</span><span class="NAME">rows</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>107</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>108</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>109</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>110</span> 
<span class='line'>111</span> </span><span class="WHIT">    </span><span class="COMM">/** This function is called when you drop a row, so redefine it in your code
<span class='line'>112</span>         to do whatever you want, for example use Ajax to update the server */</span><span class="WHIT">
<span class='line'>113</span> </span><span class="WHIT">    </span><span class="NAME">this.onDrop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">table</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">droppedRow</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>114</span> </span><span class="WHIT">        </span><span class="COMM">// Do nothing for now</span><span class="WHIT">
<span class='line'>115</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>116</span> 
<span class='line'>117</span> </span><span class="WHIT">	</span><span class="COMM">/** Get the position of an element by going up the DOM tree and adding up all the offsets */</span><span class="WHIT">
<span class='line'>118</span> </span><span class="WHIT">    </span><span class="NAME">this.getPosition</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">e</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>119</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>120</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">top</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>121</span> </span><span class="WHIT">		</span><span class="COMM">/** Safari fix -- thanks to Luis Chato for this! */</span><span class="WHIT">
<span class='line'>122</span> </span><span class="WHIT">		</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e.offsetHeight</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>123</span> </span><span class="WHIT">			</span><span class="COMM">/** Safari 2 doesn't correctly grab the offsetTop of a table row
<span class='line'>124</span> 			    this is detailed here:
<span class='line'>125</span> 			    http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/
<span class='line'>126</span> 			    the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.
<span class='line'>127</span> 			    note that firefox will return a text node as a first child, so designing a more thorough
<span class='line'>128</span> 			    solution may need to take that into account, for now this seems to work in firefox, safari, ie */</span><span class="WHIT">
<span class='line'>129</span> </span><span class="WHIT">			</span><span class="NAME">e</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.firstChild</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// a table cell</span><span class="WHIT">
<span class='line'>130</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>131</span> 
<span class='line'>132</span> </span><span class="WHIT">        </span><span class="KEYW">while</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">e.offsetParent</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>133</span> </span><span class="WHIT">            </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>134</span> </span><span class="WHIT">            </span><span class="NAME">top</span><span class="WHIT">  </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>135</span> </span><span class="WHIT">            </span><span class="NAME">e</span><span class="WHIT">     </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetParent</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>136</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>137</span> 
<span class='line'>138</span> </span><span class="WHIT">        </span><span class="NAME">left</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetLeft</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>139</span> </span><span class="WHIT">        </span><span class="NAME">top</span><span class="WHIT">  </span><span class="PUNC">+</span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">e.offsetTop</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>140</span> 
<span class='line'>141</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">x</span><span class="PUNC">:</span><span class="NAME">left</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">y</span><span class="PUNC">:</span><span class="NAME">top</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>142</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>143</span> 
<span class='line'>144</span> </span><span class="WHIT">	</span><span class="COMM">/** Get the mouse coordinates from the event (allowing for browser differences) */</span><span class="WHIT">
<span class='line'>145</span> </span><span class="WHIT">    </span><span class="NAME">this.mouseCoords</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>146</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="NAME">ev.pageX</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">ev.pageY</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>147</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">x</span><span class="PUNC">:</span><span class="NAME">ev.pageX</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">y</span><span class="PUNC">:</span><span class="NAME">ev.pageY</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>148</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>149</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>150</span> </span><span class="WHIT">            </span><span class="NAME">x</span><span class="PUNC">:</span><span class="NAME">ev.clientX</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">document.body.scrollLeft</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">document.body.clientLeft</span><span class="PUNC">,</span><span class="WHIT">
<span class='line'>151</span> </span><span class="WHIT">            </span><span class="NAME">y</span><span class="PUNC">:</span><span class="NAME">ev.clientY</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">document.body.scrollTop</span><span class="WHIT">  </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">document.body.clientTop</span><span class="WHIT">
<span class='line'>152</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>153</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>154</span> 
<span class='line'>155</span> </span><span class="WHIT">	</span><span class="COMM">/** Given a target element and a mouse event, get the mouse offset from that element.
<span class='line'>156</span> 		To do this we need the element's position and the mouse position */</span><span class="WHIT">
<span class='line'>157</span> </span><span class="WHIT">    </span><span class="NAME">this.getMouseOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>158</span> </span><span class="WHIT">        </span><span class="NAME">ev</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">ev</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">window.event</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>159</span> 
<span class='line'>160</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">docPos</span><span class="WHIT">    </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getPosition</span><span class="PUNC">(</span><span class="NAME">target</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>161</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">mousePos</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.mouseCoords</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>162</span> </span><span class="WHIT">        </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="NAME">x</span><span class="PUNC">:</span><span class="NAME">mousePos.x</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">docPos.x</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">y</span><span class="PUNC">:</span><span class="NAME">mousePos.y</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">docPos.y</span><span class="PUNC">}</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>163</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>164</span> 
<span class='line'>165</span> </span><span class="WHIT">	</span><span class="COMM">/** Take an item and add an onmousedown method so that we can make it draggable */</span><span class="WHIT">
<span class='line'>166</span> </span><span class="WHIT">    </span><span class="NAME">this.makeDraggable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>167</span> </span><span class="WHIT">        </span><span class="KEYW">if</span><span class="PUNC">(</span><span class="PUNC">!</span><span class="NAME">item</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>168</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">self</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="COMM">// Keep the context of the TableDnd inside the function</span><span class="WHIT">
<span class='line'>169</span> </span><span class="WHIT">        </span><span class="NAME">item.onmousedown</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>170</span> </span><span class="WHIT">            </span><span class="COMM">// Need to check to see if we are an input or not, if we are an input, then</span><span class="WHIT">
<span class='line'>171</span> </span><span class="WHIT">            </span><span class="COMM">// return true to allow normal processing</span><span class="WHIT">
<span class='line'>172</span> </span><span class="WHIT">            </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">target</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">getEventSource</span><span class="PUNC">(</span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>173</span> </span><span class="WHIT">            </span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">target.tagName</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'INPUT'</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">target.tagName</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">'SELECT'</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">true</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>174</span> </span><span class="WHIT">            </span><span class="NAME">currenttable</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">self</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>175</span> </span><span class="WHIT">            </span><span class="NAME">self.dragObject</span><span class="WHIT">  </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">this</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>176</span> </span><span class="WHIT">            </span><span class="NAME">self.mouseOffset</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">self.getMouseOffset</span><span class="PUNC">(</span><span class="KEYW">this</span><span class="PUNC">,</span><span class="WHIT"> </span><span class="NAME">ev</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>177</span> </span><span class="WHIT">            </span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">false</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>178</span> </span><span class="WHIT">        </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>179</span> </span><span class="WHIT">        </span><span class="NAME">item.style.cursor</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="STRN">"move"</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>180</span> </span><span class="WHIT">    </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>181</span> 
<span class='line'>182</span> </span><span class="WHIT">    </span><span class="COMM">/** We're only worried about the y position really, because we can only move rows up and down */</span><span class="WHIT">
<span class='line'>183</span> </span><span class="WHIT">    </span><span class="NAME">this.findDropTargetRow</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="KEYW">function</span><span class="PUNC">(</span><span class="NAME">y</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>184</span> </span><span class="WHIT">        </span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.table.tBodies</span><span class="PUNC">[</span><span class="NUMB">0</span><span class="PUNC">]</span><span class="PUNC">.</span><span class="NAME">rows</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>185</span> </span><span class="WHIT">		</span><span class="KEYW">for</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">=</span><span class="NUMB">0</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">&lt;</span><span class="NAME">rows.length</span><span class="PUNC">;</span><span class="WHIT"> </span><span class="NAME">i</span><span class="PUNC">++</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>186</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">row</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">rows</span><span class="PUNC">[</span><span class="NAME">i</span><span class="PUNC">]</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>187</span> </span><span class="WHIT">			</span><span class="COMM">// John Tarr added to ignore rows that I've added the NoDnD attribute to (Header rows)</span><span class="WHIT">
<span class='line'>188</span> </span><span class="WHIT">			</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">nodrop</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">row.getAttribute</span><span class="PUNC">(</span><span class="STRN">"NoDrop"</span><span class="PUNC">)</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>189</span> </span><span class="WHIT">			</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">nodrop</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="WHIT"> </span><span class="PUNC">||</span><span class="WHIT"> </span><span class="NAME">nodrop</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="STRN">"undefined"</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">  </span><span class="COMM">//There is no NoDnD attribute on rows I want to drag</span><span class="WHIT">
<span class='line'>190</span> </span><span class="WHIT">				</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rowY</span><span class="WHIT">    </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getPosition</span><span class="PUNC">(</span><span class="NAME">row</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">y</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>191</span> </span><span class="WHIT">				</span><span class="KEYW">var</span><span class="WHIT"> </span><span class="NAME">rowHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">row.offsetHeight</span><span class="PUNC">)</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>192</span> </span><span class="WHIT">				</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">row.offsetHeight</span><span class="WHIT"> </span><span class="PUNC">==</span><span class="WHIT"> </span><span class="NUMB">0</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>193</span> </span><span class="WHIT">					</span><span class="NAME">rowY</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">this.getPosition</span><span class="PUNC">(</span><span class="NAME">row.firstChild</span><span class="PUNC">)</span><span class="PUNC">.</span><span class="NAME">y</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>194</span> </span><span class="WHIT">					</span><span class="NAME">rowHeight</span><span class="WHIT"> </span><span class="PUNC">=</span><span class="WHIT"> </span><span class="NAME">parseInt</span><span class="PUNC">(</span><span class="NAME">row.firstChild.offsetHeight</span><span class="PUNC">)</span><span class="PUNC">/</span><span class="NUMB">2</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>195</span> </span><span class="WHIT">				</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>196</span> </span><span class="WHIT">				</span><span class="COMM">// Because we always have to insert before, we need to offset the height a bit</span><span class="WHIT">
<span class='line'>197</span> </span><span class="WHIT">				</span><span class="KEYW">if</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="PUNC">(</span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">></span><span class="WHIT"> </span><span class="NAME">rowY</span><span class="WHIT"> </span><span class="PUNC">-</span><span class="WHIT"> </span><span class="NAME">rowHeight</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">&&</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">y</span><span class="WHIT"> </span><span class="PUNC">&lt;</span><span class="WHIT"> </span><span class="PUNC">(</span><span class="NAME">rowY</span><span class="WHIT"> </span><span class="PUNC">+</span><span class="WHIT"> </span><span class="NAME">rowHeight</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="PUNC">)</span><span class="WHIT"> </span><span class="PUNC">{</span><span class="WHIT">
<span class='line'>198</span> </span><span class="WHIT">					</span><span class="COMM">// that's the row we're over</span><span class="WHIT">
<span class='line'>199</span> </span><span class="WHIT">					</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="NAME">row</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>200</span> </span><span class="WHIT">				</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>201</span> </span><span class="WHIT">			</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>202</span> </span><span class="WHIT">		</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>203</span> </span><span class="WHIT">		</span><span class="KEYW">return</span><span class="WHIT"> </span><span class="KEYW">null</span><span class="PUNC">;</span><span class="WHIT">
<span class='line'>204</span> </span><span class="WHIT">	</span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>205</span> </span><span class="PUNC">}</span><span class="WHIT">
<span class='line'>206</span> </span></pre></body></html>